<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/normalize.css">
</head>

<body>
    <!-- <h5>欢迎亲的登录：</h5>

    用户名：<input type="text" id="username" /><br /> 密码：
    <input type="password" id="userpass" /><br />
    <input id="btnLogin" type="button" value="登录" />
    <div id="msg"></div> -->
    <nav>
        <div class="nav-con">
            <div class="logo">
                <img src="images/HUAWEI.svg" alt="">
            </div>
            <p>华为商城</p>
        </div>
    </nav>
    <div class="main">
        <aside>
            <div>
                <span></span>
                <b>账号注册</b>
            </div>
            <div>
                <span></span>
                <b>邮箱地址注册</b>
            </div>
        </aside>
        <div class="form">
            <p>帐号登录</p>
            <div class="phone">
                <!-- <span>+86(中国)V</span> -->
                <input type="text" placeholder="帐户名称" id="username">
            </div>
            <!-- <div class="ma">
                <input type="text" placeholder="短信验证码">
                <span>获取验证码</span>
            </div> -->
            <div class="pwd">
                <input type="text" placeholder="密码" id="userpass">
                <span></span>
            </div>
            <!-- <div class="repwd">
                <input type="text" placeholder="确认密码">
                <span></span>
            </div> -->
            <input id="btnReg" type="button" value="登录">
            <div id="messageBox">

            </div>
        </div>
    </div>
    <footer>
        <ul>
            <li>华为帐号用户协议 </li>
            <li>关于华为帐号与隐私的声明</li>
            <li>常见问题</li>
            <li>Cookies</li>
        </ul>
        <p>华为帐号 版权所有 © 2011-2022</p>
    </footer>
</body>

</html>
<script type="text/javascript" src="js/jQuery.js"></script>
<!-- <script src="js/cookieTools.js"></script> -->
<script>
    let oBtnLogin = document.getElementById("btnReg");
    let oUserPass = document.getElementById("userpass");
    let oUserName = document.getElementById("username");
    oBtnLogin.onclick = function() {
        let xhr = new XMLHttpRequest();
        xhr.open("post", "php/login.php", true);

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.responseText == 1) {
                    localStorage.setItem("username", oUserName.value);
                    $("#msg").html("恭喜您，登录成功！2秒后跳转到首页");
                    setTimeout(() => {
                        location.href = "index.html";
                    }, 2000);
                } else {
                    document.getElementById("msg").innerHTML = "登录失败,用户名或者密码错误";
                }
            }
        }

        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        let str = "username=" + oUserName.value + "&userpass=" + oUserPass.value;
        xhr.send(str);
    }
</script>